<!--
 * @Author: early-autumn
 * @Date: 2020-05-11 15:32:40
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-05 14:30:44
 -->
<template>
  <div>
    <el-form inline label-suffix="：">
      <el-form-item label="实收总额">
        {{ patient.overMoney | toFixed2 }}
      </el-form-item>
      <el-form-item label="欠费总额">
        <span style="color: #ff0000">
          {{ patient.arrearage | toFixed2 }}
        </span>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" border stripe :data="chargeArrearData">
      <el-table-column
        label="操作诊所"
        align="center"
        prop="mainClosingEntriesVo.yiyaBillingMain.clinic"
      ></el-table-column>
      <el-table-column
        label="首次收费时间"
        min-width="160"
        align="center"
        prop="mainClosingEntriesVo.yiyaMainClosingEntries.createTime"
      >
      </el-table-column>
      <el-table-column
        label="欠费项目"
        align="center"
        min-width="160"
        prop="mainClosingEntriesVo.owingProject"
      ></el-table-column>
      <el-table-column
        label="TC"
        align="center"
        prop="mainClosingEntriesVo.yiyaBillingMain.tc"
      ></el-table-column>
      <el-table-column
        label="医生"
        align="center"
        prop="mainClosingEntriesVo.doctor"
      ></el-table-column>
      <el-table-column label="应收" align="center">
        <template slot-scope="scope">
          {{
            scope.row.mainClosingEntriesVo.yiyaBillingMain.receivable | toFixed2
          }}
        </template>
      </el-table-column>
      <el-table-column label="实收" align="center">
        <template slot-scope="scope">
          {{
            scope.row.mainClosingEntriesVo.yiyaBillingMain.payAmount | toFixed2
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="优惠抵扣"
        align="center"
        prop="mainClosingEntriesVo.total.deductionAmount"
      ></el-table-column>
      <el-table-column label="欠费" align="center">
        <template slot-scope="scope">
          {{
            scope.row.mainClosingEntriesVo.yiyaBillingMain.owingAmount
              | toFixed2
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="备注"
        align="center"
        min-width="150"
        prop="mainClosingEntriesVo.yiyaBillingMain.remarks"
      ></el-table-column>
      <el-table-column v-if="!marketPath" label="操作" align="center">
        <el-button
          slot-scope="scope"
          type="text"
          @click="handlePaymentOrder(scope.row)"
        >
          缴费开单
        </el-button>
      </el-table-column>
      <empty slot="empty"></empty>
    </el-table>
    <payment-order
      v-model="paymentOrder.visible"
      :data="paymentOrder.data"
      @ok="getChargeArrear"
    ></payment-order>
  </div>
</template>

<script>
import { billingRecord } from '@/api/services/billingMain'
import { deepCopy } from '@/utils/utils'
import { billingTypeEnum, billStatusEnum } from '@/utils/enums'

import { chargeArrearDataTransform } from '@/views/components/TabsPanes/utils'
import toFixed2 from '@/filters/toFixed2'

export default {
  name: 'ChargeArrear',
  components: {
    Empty: () => import('@/components/yiya/Empty'),
    PaymentOrder: () => import('./PaymentOrder'),
  },
  filters: {
    toFixed2,
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      chargeArrearData: [],
      paymentOrder: {
        visible: false,
        data: { yiyaBillingMain: {}, yiyaItemBillingExtends: [], total: {} },
      },
      marketPath: false,
    }
  },
  computed: {
    billStatusEnum() {
      return billStatusEnum
    },
    billingTypeEnum() {
      return billingTypeEnum
    },
  },
  mounted() {
    this.getChargeArrear()
    this.marketStatus()
  },
  methods: {
    //判断是否市场查看
    marketStatus() {
      if (this.$route.path === '/userMessageHandle/userHandle') {
        this.marketPath = true
      }
    },
    async getChargeArrear() {
      try {
        this.loading = true
        const { rows } = await billingRecord({
          mainStatus: 1,
          clinicPersonId: this.patient.id,
        })
        this.chargeArrearData = chargeArrearDataTransform(rows || [])
      } finally {
        this.loading = false
      }
    },
    async handlePaymentOrder(order) {
      if (
        order.listMainClosingEntriesVos.some(
          (item) => item.yiyaMainClosingEntries.billStatus !== 3
        )
      ) {
        this.$message.error('不能重复开单，此账单已开收费单')
        return
      }
      this.paymentOrder = {
        visible: true,
        data: deepCopy(order.mainClosingEntriesVo),
      }
    },
  },
}
</script>

<style></style>
